<template>
  <div class="disk-item">
    <div class="disk-icon-wrapper">
      <img
        v-if="props.diskImg"
        :src="props.diskImg"
        alt="disk icon"
        class="icon-image"
      />
      <div v-else class="icon-placeholder">
        <div class="status-light"></div>
      </div>
    </div>

    <div class="disk-info">
      <span class="disk-name">{{ props.diskName }}</span>

      <div class="progress-row">
        <div class="progress-track">
          <div class="progress-bar" :style="barStyle"></div>
        </div>

        <button
          v-if="isOverLimit"
          class="cleanup-button"
          title="清理磁盘空间"
          @click="emitCleanup"
        >
          !
        </button>
      </div>

      <span class="disk-stats">{{ infoText }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

// 1. 定义 props 接口 (无变化)
interface Props {
  diskImg?: string;
  diskName: string;
  diskMax: string;
  diskNow: string;
  limitPercent: string;
}
const props = defineProps<Props>();

// 2. 【新增】定义 emits
// 'cleanup' 事件会向父组件传递 diskName
const emit = defineEmits<{
  (e: "cleanup", diskName: string): void;
}>();

// 3. 【新增】触发 emit 的函数
const emitCleanup = () => {
  // 阻止事件冒泡 (如果按钮在链接或其它可点击元素内)
  // event.stopPropagation();
  emit("cleanup", props.diskName);
};

// 4. 核心逻辑 (Computed) (基本无变化)

const parseSize = (sizeStr: string): number => {
  return parseFloat(sizeStr) || 0;
};
const getUnit = (sizeStr: string): string => {
  const match = sizeStr.match(/[^\d.\s]+/);
  return match ? match[0] : "GB";
};

const maxNum = computed(() => parseSize(props.diskMax));
const nowNum = computed(() => parseSize(props.diskNow));
const limitNum = computed(() => parseSize(props.limitPercent) / 100);

const availableNum = computed(() => {
  const diff = maxNum.value - nowNum.value;
  return Math.max(0, parseFloat(diff.toFixed(1)));
});

const unit = computed(() => getUnit(props.diskMax));

const availableText = computed(() => {
  return `${availableNum.value.toFixed(0)} ${unit.value}`;
});

const infoText = computed(() => {
  return `${availableText.value} 可用, 共 ${props.diskMax}`;
});

const usedPercent = computed(() => {
  if (maxNum.value === 0) return 0;
  return (nowNum.value / maxNum.value) * 100;
});

// isOverLimit 计算属性现在用于 v-if
const isOverLimit = computed(() => {
  if (maxNum.value === 0) return false;
  return nowNum.value / maxNum.value > limitNum.value;
});

const barStyle = computed(() => ({
  width: `${usedPercent.value}%`,
  backgroundColor: isOverLimit.value ? "#F56C6C" : "#409EFE", // 危险红 vs 默认蓝
}));
</script>

<style scoped>
/* 整个组件的容器 (无变化) */
.disk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  color: #e0e0e0;
  padding: 8px;
}

/* 1. 左侧图标区域 (无变化) */
.disk-icon-wrapper {
  flex-shrink: 0;
}
.icon-image {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.icon-placeholder {
  width: 42px;
  height: 42px;
  background-color: #777;
  border: 1px solid #999;
  border-radius: 4px;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.status-light {
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: #67c23a;
  border-radius: 50%;
  box-shadow: 0 0 3px #67c23a;
}

/* 2. 右侧信息区域 (无变化) */
.disk-info {
  flex-grow: 1;
  width: 100%;
}

/* 2.1 磁盘名称 (无变化) */
.disk-name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

/* 2.2 【新增】进度条和按钮的 flex 容器 */
.progress-row {
  display: flex;
  align-items: center;
  gap: 8px; /* 进度条和按钮的间距 */
}

/* 2.2 【修改】进度条轨道 */
.progress-track {
  /* (移除) width: 100%; */
  flex-grow: 1; /* 【新增】占据 .progress-row 中的主要空间 */
  height: 20px;
  background-color: #d3d3d3;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 2.2 进度条 (无变化) */
.progress-bar {
  height: 100%;
  border-radius: 4px 0 0 4px;
  transition: width 0.4s ease, background-color 0.4s ease;
}

/* 2.2 【新增】清理按钮样式 */
.cleanup-button {
  flex-shrink: 0; /* 防止按钮被压缩 */

  /* 模仿 Element Plus 警告按钮的圆形图标样式 */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #fde2e2; /* Element Plus warning-light-8 */
  background-color: #fef0f0; /* Element Plus warning-light-9 */
  color: #f56c6c; /* Element Plus danger color */

  font-size: 14px;
  font-weight: bold;
  line-height: 1; /* 重置行高 */

  /* 使用 flex 居中 "!" */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  cursor: pointer;
  transition: all 0.3s ease;
}

.cleanup-button:hover {
  background-color: #f56c6c;
  color: #ffffff;
  border-color: #f56c6c;
}

/* 2.3 磁盘统计 (无变化) */
.disk-stats {
  display: block;
  font-size: 14px;
  color: #c0c0c0;
  margin-top: 5px;
}
</style>
